<template>
    <div class="top-search">
        <router-link to="/category" class="title" style="min-width:130px" v-if="title"> &lt {{ title }}</router-link>
        <img class="img" v-else src="@/assets/images/log.png" @click="toHome" />

        <van-search class="input" placeholder="搜索" shape="round" @click="toSearch" />
        <a
            href="https://m.ximalaya.com/applink?open_xm=iting%3A%2F%2Fopen%3Fcopycode%3D1%2520http%253A%252F1%2523Xm001erkTK%2523%2522&from=&keep=true&isSeo=true&fcid=10000&fpage=https%3A%2F%2Fm.ximalaya.com%2Fcategory%2F">
            <van-button style="min-width:58px" color="#fb401d" plain round size="mini">打开APP</van-button></a>

    </div>
</template>

<script setup lang="ts">

import { useRouter } from 'vue-router'
const router = useRouter()
defineProps<{
    title?: string
}>()

const toHome = () => {
    router.push({ path: '/home' })
}
const toSearch = () => {
    router.push({ path: '/search' })    
}
</script>

<style scoped lang="scss">
.top-search {
    display: flex;
    justify-content: space-evenly;
    width: 100%;
    align-items: center;

    a {
        // box-sizing: border-box;
        display: block;
        width: 70px;
    }

    .img {
        width: 75px;
    }

    .title {
        font-size: 18px;
        width: 33%;
        height: 28px;

    }

    .input {
        width: 200px;
    }
}</style>